<script setup lang="ts">
import { onMounted } from 'vue';
import { reLaunch, showLoading, eventCenter, getCurrentInstance } from '@tarojs/taro';
import { MEETING_INFO_QUERY_APP } from '/@/api/modules/meeting/meeting-info';
import { state } from './state';
import Meeting7DayList from './components/meeting-7-day-list.vue';
import MeetingListItem from './components/meeting-list-item.vue';
import { meetingRoomUsedStatus } from '/@/common/meeting/meeting-list';
import use7Day from './hooks/date-utils';
const { getNewTimestamp } = use7Day();
state.appointmentTime = getNewTimestamp();
/**
 * @description 消息列表查询
 * @param {Number} page -当前页
 * @param {Number} pageSize -每页条数
 */
function queryList(page: number = 1, pageSize: number = 15) {
  if (!page && state.finished) return;
  state.loading = true;
  showLoading();
  MEETING_INFO_QUERY_APP({
    comQuery: { page, pageSize },
    dto: { appointmentTime: state.appointmentTime },
  })
    .then((res) => {
      state.loading = false;

      if (
        state.activePage >=
        (res.comQuery?.pageCount ||
          (res.comQuery?.totalCount as number) / (res.comQuery?.pageSize as number) ||
          1)
      )
        state.finished = true;
      if (!res.dto || !res.dto.length) return;

      res.dto.forEach((item) => {
        state.list.push({
          ...item,
          ...meetingRoomUsedStatus(item),
        });
      });
      state.activePage += 1;
    })
    .catch(() => {
      state.loading = false;
    });
}

/**
 * @function 加载
 */
function onLoading() {
  if (state.finished) return;
  queryList(state.activePage);
}

onMounted(() => {
  eventCenter.on(getCurrentInstance().router?.onShow as string, () => {
    refreshList();
  });
});

function refreshList() {
  state.activePage = 1;
  state.loading = true;
  state.finished = false;
  state.list = [];
  onLoading();
}

/**
 * 选择day时间
 */
function chooseDay(appointmentTime: number) {
  //旧的时间戳 === 新的时间戳,不用处理
  if (state.appointmentTime === appointmentTime) {
    return;
  }
  state.appointmentTime = appointmentTime;
  refreshList();
}
</script>

<template>
  <view class="meeting-list app-page--1">
    <app-navbar title="会议预约" />
    <nut-tabs
      model-value="record"
      @click="
        ({ paneKey }) => {
          if (paneKey === 'push') {
            reLaunch({ url: '/pages/approve/record/index?from=meeting' });
          }
        }
      "
    >
      <nut-tab-pane title="会议室" pane-key="record" />
      <nut-tab-pane title="预约记录" pane-key="push" />
    </nut-tabs>
    <meeting7-day-list
      v-if="state.appointmentTime"
      :appointment-time="state.appointmentTime"
      @on-selected="chooseDay"
    />
    <scroll-view
      class="app-page__wrapper"
      :scroll-y="true"
      :lower-threshold="100"
      @scrolltolower="onLoading()"
    >
      <view class="meeting-list__wrapper">
        <meeting-list-item
          :item="item"
          :appointment-time="state.appointmentTime"
          v-for="item in state.list"
          :key="item.id"
        />
        <view class="app-page__list-tips">
          <text v-if="!state.list.length">暂无数据！</text>
          <text v-else-if="state.list.length && state.loading">加载中...</text>
          <text v-else-if="state.list.length && state.finished">加载完成!</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
./hooks/date-utils
